/*
 * Copyright © 2017 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import '../../../styles/variables.scss';

$action-btn-inactive-color: #aaaaaa;
$top-panel-connection-color: $grey-03;
$dropdown_menu_color: $link-color;
$dropdown_item_font_color: black;
$success_alert_color: white;
$success_alert_bg_color: $brand-success;
$row_column_count_color: #6b6767;

.dataprep-container {
  .top-panel {
    height: 50px;
    border-bottom: 1px solid $grey-05;
    margin-left: 0;
    display: flex;
    flex-wrap: unset;

    .left-title,
    .action-buttons,
    .content-switch {
      flex: 0.4;
    }
    .content-switch {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .left-title {
      padding-left: 0;
      overflow: hidden;
      text-overflow: ellipsis;

      .upper-section {
        height: 100%;
        align-items: center;
        display: flex;
      }

      .data-prep-name,
      .upgrade-button {
        display: inline-block;
      }

      .data-prep-name {
        font-size: 18px;
        padding: 0 10px;
        width: 100%;

        .title_bar {
          white-space: nowrap;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;

          .title,
          .row_column_count {
            display: inline-block;
            padding-right: 10px;
          }

          .row_column_count {
            padding-left: 10px;
            font-size: 13px;
            color: $row_column_count_color;
          }
        }

        .connection-type {
          font-size: 13px;
          color: $top-panel-connection-color;

          .connection-name {
            margin-left: 5px;
          }
        }
      }

      .upgrade-button {
        margin-top: 2px;
        margin-right: 10px;
        margin-left: 10px;
        vertical-align: top;

        .fa.fa-wrench {
          margin-right: 3px;
        }
      }

      .workspace-mgmt {
        padding-left: 11px;
        cursor: pointer;
        font-size: 14px;

        .fa-pencil { margin-left: 10px; }
      }
    }

    .tag {
      font-size: 10px;
      vertical-align: top;
      margin-left: 3px;
      margin-top: 2px;
      padding-bottom: 3px;
    }

    .action-buttons {
      display: flex;
      margin-right: 20px;
      align-items: center;
      justify-content: flex-end;
      z-index: 1060;
      height: 49px;

      .btn-primary {
        margin: 0 10px;
        white-space: nowrap;
        .icon-spinner {
          margin: 0 5px;
        }
      }

      .plus-button-container {
        max-height: 100%;
        .plus-button {
          margin: 0;
          position: relative;
          bottom: 30px;
          .popper {
            margin-right: 20px;
          }
        }
      }

      .more-dropdown {
        margin-right: 20px;
        margin-left: 15px;
        > div {
          &:first-of-type {
            line-height: 31px;
            color: $blue-02;
            cursor: pointer;
          }
        }
        .popper {
          margin-right: 80px;
          ul {
            margin: 0;
          }
          .popover-menu-item {
            margin: 0;
            .btn.btn-link {
              padding: 0;
            }
            svg {
              ~ * {
                margin-left: 5px;
              }
            }
            &.disabled {
              cursor: not-allowed;
              opacity: 0.5;
            }
          }
        }
      }

      .success-alert {
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        border: none;
        border-radius: 0;
        z-index: 10;
        color: $success_alert_color;
        background-color: $success_alert_bg_color;
        padding: 10px 15px;
      }
    }
  }
}

.workspace-management-modal,
.add-to-pipeline-dataprep-modal,
.dataprep-upgrade-modal {
  .close-section {
    cursor: pointer;
  }
  .modal-body {
    overflow-y: auto;
  }
}

.workspace-management-modal.modal-dialog {
  .modal-body {
    .button-container {
      margin-top: 10px;

      .btn:not(:first-child) {
        margin-left: 5px;
      }
    }

    .file-input {
      input.form-control {
        height: initial;
      }
    }

    .record-delimiter {
      margin-top: 10px;
      .label-control { margin-right: 10px; }
    }
  }
}

.add-to-pipeline-dataprep-modal.modal-dialog,
.dataprep-upgrade-modal.modal-dialog {

  .modal-content .modal-body {
    padding: 0;

    .message { padding: 15px; }

    pre {
      .btn-link {
        cursor: pointer;
        color: var(--brand-primary-color);
      }
    }

    .loading-container {
      padding: 25px;
      &.error-message-container {
        padding: 15px;
        .fa.fa-exclamation-triangle {
          font-size: 15px;
          margin-right: 5px;
        }
      }
      .remedy-message {
        margin: 3px 0;
      }
    }

    .action-buttons {
      width: 100%;
      display: inline-flex;

      .btn {
        width: 50%;
        border-radius: 0;
        border: none;
        border-top: 1px solid $grey-05;
        padding: 10px 0;

        &:first-child { border-right: 1px solid $grey-05; }
        .fa { margin-right: 10px; }

        &.inactive {
          cursor: not-allowed;
          color: $action-btn-inactive-color;

          &:hover { background: transparent; }
        }
      }

    }
  }
}
.add-to-pipeline-dataprep-modal.modal-dialog {
  .modal-footer {
    &.dataset-copy-error-container {
      padding: 0;
      text-align: left;
    }
  }
}
.dataprep-schema-modal.modal-dialog {
  .modal-header {
    .btn.btn-link {
      padding: 0;
      margin-right: 20px;
      color: inherit;
      font-size: inherit;

      &[disabled] {
        .fa.fa-download {
          cursor: inherit;
        }
      }

      &:focus,
      &:active {
        outline: none;
      }
    }
  }
  .modal-body {
    overflow-y: auto;
    max-height: 75vh;
    .remedy-message {
      margin: 3px 0;
    }
    .btn-link {
      cursor: pointer;
      color: var(--brand-primary-color);
    }
  }
}
